<template>
  <div class="table-container">
    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 24px; font-weight: bold; font-size: 24px;">
      物料仓库
    </div>
    <div style="display: flex; justify-content: center; align-items: center; margin-top: 16px;">
      <el-input v-model="input" style="width: 80%;" placeholder="搜索材料" />
      <el-button type="primary" @click="searchMaterial">搜索</el-button>
    </div>
    <el-table :data="filteredTableData" style="width: 100%;">
      <el-table-column prop="materialId" label="材料编号" />
      <el-table-column prop="materialName" label="名称" />
      <el-table-column prop="quantity" label="数量" />
    </el-table>
    <p v-if="!filteredTableData.length && input">没有当前材料,可找管理员申请购买。</p>
  </div>
  <div class="bottom-fixed-button">
    <el-button type="primary" style="width: 90%; " @click="returnToTechnician">返回菜单</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {ElButton} from "element-plus";
import {useRouter} from "vue-router"; // 引入 Axios

const input = ref('');
const tableData = ref([]);
const filteredTableData = ref([]);

const router = useRouter()
const returnToTechnician = () =>{
  router.push('/technician/home')
}

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:8080/mm/getData');
    tableData.value = response.data; // 假设后端返回的数据格式与 tableData 相匹配
    filteredTableData.value = tableData.value; // 初始时显示所有数据
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});

function searchMaterial() {
  materialNameSearch.value = input.value;
  if (!input.value) {
    filteredTableData.value = tableData.value; // 如果输入为空，则显示所有数据
  } else {
    filteredTableData.value = tableData.value.filter(item =>
        item.materialName.toLowerCase().includes(input.value.toLowerCase())
    );
  }
}

const materialNameSearch = ref('');
</script>

<style scoped>
.table-container {
  padding: 16px; /* 添加内边距以增加与边缘的距离 */
  max-height: calc(100vh - 96px); /* 减去标题的高度和其他可能的边距 */
  overflow-y: auto; /* 当内容超出时显示滚动条 */
}
.bottom-fixed-button {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}
</style>